<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
  <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
  <!-- 头部 s -->
  <div class="d-flex jc-center title_wrap">
    <div class="zuojuxing"></div>
    <div class="youjuxing"></div>
    <div class="guang"></div>
    <div class="d-flex jc-center">
      <div class="title">
        <span class="title-text">仓库作业可视化看板</span>
      </div>
    </div>
    <div class="timers">
      {{ dateYear }} {{ dateWeek }} {{ dateDay }}
      <el-icon class="shezhiStyle">
        <!-- <Setting style="cursor: pointer" @click="showSetting" /> -->
      </el-icon>
    </div>
  </div>
  <setting ref="setting" />
</template>

<script>
import { formatTime } from "../utils/index.js";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import { Setting } from "@element-plus/icons-vue";
import setting from "./setting.vue";
export default {
  components: { ScaleScreen, Setting, setting },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    showSetting() {
      console.log("该设置按钮操作被执行！！");
      this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
  },
};
</script>

<style scoped>
.title_wrap {
  height: 60px;
  background-image: url("../assets/imgs/img/top.png");
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 4px;
}

.host-body .title_wrap .guang {
  position: absolute;
  bottom: -26px;
  background-image: url("../assets/imgs/img/guang.png");
  background-position: 80px center;
  width: 100%;
  height: 56px;
}

.timers {
  position: absolute;
  right: 0;
  top: 30px;
  font-size: 18px;
  display: flex;
  align-items: center;
  color: aliceblue;

  background: linear-gradient(
    92deg,
    #0072ff 0%,
    #00eaff 48.8525390625%,
    #01aaff 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  .blq-icon-shezhi02 {
    cursor: pointer;
  }
  .shezhiStyle {
    width: 25px;
    height: 27px;
    margin-left: 5px;
  }
}

.title {
  position: relative;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    width: 100%;
    background: linear-gradient(
      92deg,
      #0072ff 0%,
      #00eaff 48.8525390625%,
      #01aaff 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* 其他样式省略 */

.host-body .title .title-text {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 6px;
  width: 100%;
  background: linear-gradient(
    92deg,
    #0072ff 0%,
    #00eaff 48.8525390625%,
    #01aaff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
